<template>
    <div class="orderDetails publicBox">
        <div class="publicBoxTitle ">
            售后信息
        </div>
        <div class="allOrderBox publicBoxContent">
            <div class="nav">

                <div class="navTitle">申请时间：{{orderDetails && orderDetails.order_goods.create_at}}</div>
                <div class="navTitle">
                    退款类型：{{orderDetails && orderDetails.type.text}}
                    <span style="margin-left: 100px">退款说明：{{orderDetails && orderDetails.apply_desc}}</span>
                </div>
                <div class="navTitle">
                    退款状态：{{orderDetails && orderDetails.status.text}}({{orderDetails && orderDetails.admin_reason}})
                    <span style="margin-left: 100px">退款原因：{{orderDetails && orderDetails.refuse_desc}}</span>
                </div>
                <div class="navTitle" v-if="orderDetails && orderDetails.status.value==4">
                    物流公司：{{orderDetails && orderDetails.express_id}}
                    <span style="margin-left: 100px">物流单号：{{orderDetails && orderDetails.express_no}}</span>
                </div>
                <div class="navTitle">
                    <div>提交凭证：</div>
                    <img v-if="orderDetails.images!=''" v-for="(item,index) in orderDetails && orderDetails.images.split(',')" :key="index" :src=" item" alt="提交凭证"/>

                </div>


            </div>

        </div>
<!--        <template  v-if="orderDetails && [0,1,2,3,4,8,11,-1,-2,-4,-5,-6,-3,-7].indexOf(orderDetails.order_status) == -1">-->
<!--            <div class="publicBoxTitle ">-->
<!--                发货物流-->
<!--            </div>-->

<!--            <div class="publicBoxContent logistics">-->
<!--                <div class="logisticsTitle">-->
<!--                    <span>物流公司：<span>{{Logistics && Logistics[0].companyName}}</span></span>-->
<!--                    <span>运单号：<span>{{Logistics && Logistics[0].shipNo}}</span></span>-->
<!--                </div>-->
<!--                <div :class="['logisticsStatus',show===true ? 'dip':'sho']" v-if="activities.length!=0">-->
<!--                    <el-timeline :reverse="reverse">-->
<!--                        <el-timeline-item color="red" v-for="(activity, index) in activities" :key="index" :color=" activity && activity.color"-->
<!--                                          :timestamp="activity.time">-->
<!--                            <template v-if="index==activities.length-1">-->
<!--                                <strong> {{activity.context}}</strong>-->
<!--                            </template>-->
<!--                            <template v-else>-->
<!--                                {{activity.context}}-->
<!--                            </template>-->

<!--                        </el-timeline-item>-->
<!--                    </el-timeline>-->

<!--                </div>-->
<!--                <div v-else-if="Logistics.length!=0">暂无物流信息</div>-->
<!--                <div v-else>商家备货中</div>-->
<!--                <div v-if="!show" class="logisticsBtn" @click="overflow">显示全部物流信息</div>-->
<!--                <div v-else class="logisticsBtn" @click="overflow">收起</div>-->
<!--            </div>-->
<!--        </template>-->

        <div class="publicBoxTitle ">
            订单明细
        </div>
        <div class="orderDetailed publicBoxContent">
            <div class="detailTitle">
                <span>订单编号：
                    {{orderDetails && orderDetails.order_goods.child.child_no}}
<!--                    <span class="detailLeft">下单账号：5464654654654</span>-->
                </span>
            </div>
            <div class="detailTitle">
                <span>收货地址：{{orderDetails && orderDetails.order_master.address.detail}}   </span>
            </div>
            <div class="detailTitle">
                <span>报关信息：{{orderDetails && orderDetails.contact}}，{{orderDetails && orderDetails.phone}}，{{orderDetails && orderDetails.order_master.address.id_card_number}}    </span>
            </div>
            <div class="detailTitle">
                <span>
                    交易单号：{{orderDetails && orderDetails.order_master.order_no}}
<!--                    <span class="detailLeft">交易流水号：7464654654654</span>-->
                </span>
            </div>

            <div class='info_sp' v-for="item in 1" :key='item'>
                <div class='info_top'>
                    <table>
                        <tr>
                            <td class="tableLeft">商品</td>
                            <td  class="guding">贸易方式</td>
                            <td class="guding" v-for="(ite,inde) in orderDetails && orderDetails.order_goods.attr" :key="inde">{{ite[0]}}</td>
                            <td  class="guding">订单金额(元)</td>
<!--                            <td  class="guding">订单来源</td>-->
                            <td  class="guding">状态</td>
                            <td  class="guding">操作</td>
                        </tr>
                    </table>
                </div>
                <div class='info_centent'>
                    <table>
                        <tr>
                            <td class="tableLeft ">
                                <div class="cnm">
                                    <div class="tableLeftImg">
                                        <img :src="orderDetails && $getImg(orderDetails && orderDetails.order_goods.image)" alt="">
                                    </div>
                                    <div class="tableLeftName">
                                        <p>{{orderDetails && orderDetails.order_goods.goods_name}}</p>
                                    </div>
                                </div>

                            </td>
                            <td  class="guding">{{orderDetails && orderDetails.order_goods.trade_type_name}}</td>
                            <td  class="guding" v-for="(ite,inde) in  orderDetails && orderDetails.order_goods.attr">{{ite[1]}}</td>
                            <td  class="guding">{{orderDetails && orderDetails.order_goods.total_pay_price}}(元)</td>
<!--                            <td  class="guding">{{orderDetails && orderDetails.order_goods.source_name}}</td>-->
                            <td  class="guding">
                                <span v-if="orderDetails && orderDetails.order_goods.is_refund==0">已取消</span>
                                <span v-else>
                                    {{orderDetails &&  (orderDetails.status.value==4 ? "已发货待审核":orderDetails.status.text)}}
                                </span>

                            </td>
                            <td  class="guding">
                                <span class="statusBtn cancal" v-if="[0].indexOf(orderDetails && orderDetails.status.value) != -1 && orderDetails.order_goods.is_refund==1" @click="cancel">取消售后</span>
                                <span class="statusBtn cancal" v-if="(orderDetails && orderDetails.type.value == 1) && (orderDetails.status.value==1)" @click="$router.push({path: `/index/order/applyDetails?orderId=${orderDetails.order_refund_id}`})">发货</span>

                            </td>
                        </tr>
                    </table>
                </div>
                <div class='info_bottom'>
                    <div>
                        <span>留言：{{orderDetails && orderDetails.order_goods.buyer_remark}}</span>

                    </div>
                    <div class='bottom_rig'>
                        <span>实付金额 ( 含运费 ¥{{orderDetails && orderDetails.order_goods.express_price}}，以优惠 ¥ 0.00 )</span>
                        <span class="total">¥{{orderDetails && orderDetails.order_goods.total_pay_price}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from '../../config/index'
    export default {
        name: "serviceOrder",
        data() {
            return {
                act: 1,
                changRight: '',
                reverse: true,
                show: false,
                activities: [
                    {
                        content: '活动按期开始',
                        timestamp: '2018-04-15'
                    }, {
                        content: '通过审核',
                        timestamp: '2018-04-13'
                    }, {
                        content: '创建成功',
                        timestamp: '2018-04-11'
                    },
                    {
                        content: '活动按期开始',
                        timestamp: '2018-04-15'
                    }, {
                        content: '通过审核',
                        timestamp: '2018-04-13'
                    }, {
                        content: '创建成功',
                        timestamp: '2018-04-11'
                    }],
                orderId:0,
                orderDetails: null,
                imgUrl: config.imgUrl,
                Logistics:null,
                num:5
            };
        },
        created() {
            this.orderId = this.$route.query.orderId;
            this.getDetail();

        },
        methods:{
            cancel(){
                this.$HttpGet("/index.php?s=/admin/home.refund/cannel", {
                    order_refund_id: this.orderId
                }).then(res => {
                    if(res.code==0){
                        this.$notifySuccess('取消成功');
                    }
                    this.getDetail();
                })
            },
            getLogistics(sn,code,no,child){
                console.log(sn,code,no,child)

                this.$HttpGet("/index.php?s=/admin/order/detail_express", {
                    order_sn:sn,
                    dly_code:code,
                    ship_no:no,
                    child_no:child
                }).then(res => {
                    this.activities=[];
                    if(res.data.data.length>0){
                        this.activities=res.data.data.data.reverse();
                    }
                    if(this.activities.length!=0){
                        this.activities[this.activities.length-1]['color']='#2bce2f';
                    }
                })
            },
            getDetail() {

                this.$HttpGet("/index.php?s=/admin/home.refund/detail", {
                    order_refund_id: this.orderId
                }).then(res => {
                    this.orderDetails = res.data;
                    if(res.data.order_goods.child.ships != ""){
                        this.Logistics = JSON.parse(res.data.order_goods.child.ships);
                    }

                    console.log(this.Logistics)
                    //拆分规格

                        var arr = this.orderDetails.order_goods.goods_attr.split("|");
                        var endArr = arr.map((item,index)=>{
                            return item.split("_")
                        });
                        endArr.pop();
                        this.num += endArr.length;
                        this.orderDetails.order_goods.attr=endArr;

                    //物流
                    if(this.Logistics != "[]" && this.Logistics != null && this.Logistics.length != 0 && this.Logistics != ""){

                        for(let i=0;i<this.Logistics.length;i++){
                            this.getLogistics(this.orderDetails.order_goods.child.order_sn,this.Logistics[i].dlyCode,this.Logistics[i].shipNo,this.orderDetails.order_goods.child.child_no)
                        }
                    }



                })
            },
            overflow(){
                this.show=!this.show;
            }
        }
    }
</script>

<style scoped lang="scss">
    .dip {
        height: auto !important;
    }

    .sho {
        height: 220px !important;
    }
    .orderDetails {
        .publicBoxTitle {
            position: relative;
            padding-left: 10px;

            &:before {
                content: '';
                width: 4px;
                height: 14px;
                background: #3A61CA;
                position: absolute;
                left: 1px;
                top: 3px;
            }
        }

        .allOrderBox {

            .nav {
                position: relative;
                width: 1020px;
                height: 100%;
                padding-top: 20px;
                .navTitle{
                    margin-bottom: 20px;
                    img{
                        margin-top: 10px;
                        width: 80px;
                        height: 85px;
                        margin-right: 20px;
                    }
                }
            }

        }

        .logistics {
            padding-top: 0;

            .logisticsTitle {
                height: 50px;
                border-bottom: 1px solid #EEEEEE;
                line-height: 50px;
                margin-bottom: 30px;

                > span {
                    margin-right: 75px;
                    color: rgba(0, 0, 0, 0.5);

                    span {
                        color: black;
                    }
                }
            }

            .logisticsStatus {
                height: 200px;
                overflow: hidden;
                display: block;
                padding-left: 1px;
            }

            .logisticsBtn {
                font-size: 12px;
                font-weight: 400;
                margin-top: 10px;
                color: #3A61CA;
            }

        }

        .orderDetailed {
            padding-top: 10px;

            .detailTitle {
                margin-top: 20px;

                .detailLeft {
                    margin-left: 30px;
                }
            }

            .info_sp {
                width: 100%;
                height: 170px;
                margin-top: 20px;

                .info_top {
                    width: 100%;
                    height: 40px;
                    background: rgba($color: #385cc8, $alpha: 0.1);
                    padding-left: 15px;
                    display: flex;
                    justify-content: space-around;
                    text-align: left;

                    table {
                        width: 100%;
                        height: 100%;

                        .tableLeft {
                            width: 30%;
                        }

                    }
                }

                .info_centent {
                    padding-left: 15px;
                    width: calc(100% - 2px);
                    height: 90px;
                    background: #ffffff;
                    border-left: 1px solid #eeeeee;
                    border-right: 1px solid #eeeeee;

                    table {
                        width: 100%;
                        height: 100%;

                        .tableLeft {
                            width: 30%;
                            height: 100%;

                            .cnm {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                align-items: center;

                                .tableLeftImg {
                                    img {
                                        width: 56px;
                                        height: 56px;
                                    }
                                }

                                .tableLeftName {
                                    margin-left: 16px;

                                    p {
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 2;
                                        overflow: hidden;
                                        margin-top: 10px;
                                        margin-bottom: 10px;
                                    }
                                }
                            }


                        }
                    }
                }

                .info_bottom {
                    width: 100%;
                    height: 50px;
                    padding-left: 15px;
                    // line-height: 50px;
                    background: rgba($color: #385cc8, $alpha: 0.05);
                    display: flex;
                    justify-content: space-between;
                    align-content: center;
                    align-items: center;

                    input {
                        width: 550px;
                        height: 30px;
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                        border-radius: 5px;
                    }

                    .bottom_rig {
                        text-align: right;

                        .total {
                            margin-left: 35px;
                            margin-right: 20px;
                            color: rgba(#E93030, 0.7);

                        }
                    }
                }
            }
        }

    }
    .guding{
        width: 10%;
        .statusBtn {
            display: block;
            margin-bottom: 5px;
            color: #409EFF;
            cursor: pointer;
            width: 64px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            border-radius: 6px;
        }
        .cancal{
            background: #FFFFFF;
            border: 1px solid #EEEEEE;
            color: #333333;
        }
        .cancal:hover{
            color: #E93030;
            background: #FFFFFF;
            border: 1px solid #E93030;
        }
    }
</style>